<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#all{width:800px;height: 3333px;background:#D0D0D0;margin:auto;}
			#top-font{height: 80px;background:red;text-align: center;padding-top:20px ;}
			#top-font #firstfont{line-height: 40px;font-size: 24px;color:#29384B;}
			#top-font #lastfont{color:#D0D0D1}
			#yourgender{height: 100px;}
			.font{float:left;width:217px;height: 100px;background:greenyellow;line-height: 100px;color:#D0D0D1;font-family: "bodoni mt";}
			#yourgender #photo{float: left;width:583px;height:100px;line-height: 100px;background: blue;}
			#yourgender #photo img{vertical-align: middle;border:solid 1px blue;border-radius:90px;}
			#yourgender #photo p{display: inline-block;padding-left: 25px;padding-right:25px;font-weight: bold;}
			#HEIGHTWEIGHT #inputbox{float: left;width:583px;height:100px;line-height: 100px;background: orange;font-size:23px;}
			#HEIGHTWEIGHT #inputbox input{width: 80px;height: 52px;text-align: center;border:1px dodgerblue solid;border-radius: 5px;}
			#FAMILY-HISITRY{height: 200px;background: green;clear: both;}
			
			#FAMILY-HISITRY>p{width: 217px;height:200px;float: left;color:#D0D0D1;line-height: 200px;background: rosybrown;}
			#FAMILY-HISITRY #right{float:left;height: 200px;line-height: 140px;}
			#FAMILY-HISITRY .topfont{font-size: 16px;font-weight: bold;line-height: 31px;}
			#fangkuai{}
			.checkboxactive{line-height:200px;width: 37px ;height: 37px;line-height:37px;background: deepskyblue;font-size: 22px;display:inline-block;text-align: center;color: white;}
			#ACTIVITYLEVEL{height: 200px;background: plum;}
			#ACTIVITYLEVEL #right{background: seagreen;height: 200px;display: inline-block;width:583px;}
			#ACTIVITYLEVEL #right #ptop{line-height:50px ;}
			#ACTIVITYLEVEL #right #left{height: 150px;display: inline-block;width: 50%;background: slateblue}
			#ACTIVITYLEVEL #right #right1{height: 150px;display: inline-block;width: 50%;background: fuchsia;}
			#ACTIVITYLEVEL #right #left img{display: block;margin-left: 60px;margin-top: 10px;}
			#ACTIVITYLEVEL #right #right1 img{display: block;margin-left: 60px;margin-top: 10px;}
		</style>
	</head>
	<body>
		<div id="all">
			<div id="top-font">
				<p id="firstfont">So far so good.Let's talk about your health</p>
				<p id="lastfont">We use this info to put you in a group with people close to your attributr(weird choice of world)</p>
			</div>
			<div id="yourgender">
				<div class="font">
					<p>YOUR GENDER</p>
				</div>
				<div id="photo">
						<img  id="a" src="img/girl.svg"/></option><p id="female">Female</p>
						<img  id="boy" src="img/boy_default.svg"/><p>Male</p>
				</div>
				<hr color=goldenrod/>
			</div>
			<div id="HEIGHTWEIGHT">
				<div class="font">
					<p>YOUR GENDER</p>
				</div>
				<div id="inputbox">
					<input type="text" />&nbsp;<em>ft.</em>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="text" />&nbsp;in.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<input type="text" />&nbsp;lbs.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					
				</div>
				<hr color=goldenrod/>
			</div>
			<div id="FAMILY-HISITRY">
				<p>FAMILY-HISITRY</p>
				<div id="right">
					<p class="topfont" >Any one in your family have prediabetes?</p>
					<p class="topfont">check all that apply. And if you would rather not say. that's okay.</p>
					<div id="fangkuai" style="height: 138px;width:180px;display:inline-block;background:sandybrown;">
					<div class="checkboxactive"><p>✔</p></div>&nbsp;&nbsp;&nbsp;&nbsp;Parents&nbsp;&nbsp;&nbsp;&nbsp;
					</div><div id="fangkuai" style="height: 138px;width:180px;display:inline-block;background:sandybrown;">
					<div class="checkboxactive"><p>✔</p></div>&nbsp;&nbsp;&nbsp;&nbsp;Parents&nbsp;&nbsp;&nbsp;&nbsp;
					</div>	
				</div>
			</div>
			<hr color="#1E90FF" />
			<div id="ACTIVITYLEVEL">
				<div class="font" style="height: 200px;line-height: 200px;">ACTIVITYLEVEL</div>
				<div id="right">
					<p id="ptop">How active are you on a weekly basis?</p>
					<div id="left" >
						<img  src="img/QQ截图20180728114228.png" />
						<input type="button" style="width: 50px;height:50px;" />
					</div><div id="right1">
						<img  src="img/QQ截图20180728114228.png" />
						<input type="button" style="width: 50px;height: 50px;" />
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
